

<!-- 购买礼品卡 -->
<template>
	<view class="body">

		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="购买礼品卡" colorTheme="black">
			</navHeader>
		</view>


		<!-- 订单商品 -->
		<view class="good-list">

			<!-- 当前规格 -->
			<view class="currentSpec goods-item flex-center">

				<view class="goods-logo">
					<image :src="imgSite + cgImage"></image>
				</view>

				<!-- 已选规格 -->
				<view class="goods-main flex1-center">

					<!-- 名称 -->
					<view style="display:flex; width:100%;">
						<view class="goods-title ellipsis2">{{cgTitle}}</view>
					</view>

					<!-- 价格 -->
					<view class="goods-buy flex-center">
						<view class="goods-price">{{'¥'+cgsAmount / 100}}</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 实名认证 -->
		<view @click="gotoRealName()" v-if="realNameViewFlag" class="realName-Container">
			<view class="lefter">
				<view class="idCard-Container">
					<image class="idCard-icon" :src="icon.idCard"></image>
					<view class="idCard-text">
						身份信息认证
					</view>
				</view>
				<view class="idCardTips-Container">
					根据国家法律规定，超过￥1000需验证付款人身份
				</view>
			</view>
			<view class="righter">
				<image class="select-icon" :src="icon.select"></image>
			</view>
		</view>

		<!-- 操作数量 -->
		<view class="oneItem-Container operateNum-Container">
			<view class="item-label">购买数量</view>
			<view class="count-Content">
				<view @click="minusOneHandler" class="minusOne">
					<image v-if="buyCount >= 1" :src="icon.minus_active" mode=""></image>
					<image v-else :src="icon.minus_active" mode=""></image>
				</view>
				<view class="inputCount">
					<input type="number" v-model="buyCount" @blur="inputOneHandler" />
				</view>
				<view @click="addOneHandler" class="addOne">
					<image :src="icon.add_active" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 发票信息 -->
		<view @click="gotoSelectInvoicePage()" class="oneItem-Container invoice-Container">
			<view class="item-label">发票信息</view>
			<view class="item-operate selectInvoice-Container">
				<view v-if="invoiceInfo != null" class="unSelectText selectedText">
					{{invoiceInfo.cidType | cidTypeFormate}}
				</view>
				<view v-else class="unSelectText">
					不需要发票
				</view>
				<image class="selectInvoice" :src="icon.selectInvoice"></image>
			</view>
		</view>
		
		
		<!-- 协议 -->
		<view class="agreement-Container">
			<image class="agreeIcon" :src="icon.agreeBtn" mode=""></image>
			<view class="description">
				我已同意构购礼品卡的<text class="agreeH5Link" @click="toRichtext('7')">《购买和使用协议》</text>
			</view>
		</view>


		<!-- 合计信息 -->
		<view class="submit-bar flex-center">
			<view class="submit-prices flex-center">
				<view>实付款：</view>
				<text>￥{{priceFinally / 100}}</text>
			</view>
			<view class="submit-btn" @click="submitOrder">去支付</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	import navHeader from '@/components/nav-header/nav-header';

	export default {
		filters: {
			
			//发票类型格式化
			cidTypeFormate: function(cidType) {
				var cidTypeName = "";
				switch(parseInt(cidType)) {
					case 1:
						cidTypeName = "普通纸质发票";
						break;
					case 2:
						cidTypeName = "普通电子发票";
						break;
					case 3:
						cidTypeName = "增值税纸质发票";
						break;
					case 4:
						cidTypeName = "增值税电子发票";
						break;
				}
				
				return cidTypeName || "不需要发票";
			}
		},
		components: {
			navHeader
		},
		computed: {
			...mapState(['imgSite', 'hasLogin'])
		},
		data() {
			return {
				icon: {
					idCard: "/static/images/user/giftCard/idCard-icon.png",
					select: "/static/images/user/giftCard/select-icon.png",
					add_active: "/static/images/detail/add_active.png",
					add_disabled: "/static/images/detail/add_disabled.png",
					minus_active: "/static/images/detail/minus_active.png",
					minus_disabled: "/static/images/detail/minus_disabled.png",
					agreeBtn: "/static/images/login/agreeBtn.png",
					selectInvoice: "/static/images/order/selectInvoice.png"
				},

				//用户信息
				realNameFlag: false,
				realNameViewFlag: false,
				userInfo: {},

				//商品信息
				cgcSpecificationId: "",
				cgImage: "",
				cgTitle: "",
				cgsAmount: "",
				buyCount: 1,
				priceFinally: 0.00,
				

				//发票信息
				invoiceInfo: null
			};
		},
		onLoad: function(options) {

			options = JSON.parse(options.params);
			this.cgcSpecificationId = options.cgId;
			this.cgImage = options.cgImage;
			this.cgTitle = options.cgTitle;
			this.cgsAmount = options.cgsAmount;
			this.priceFinally = options.cgsAmount * 1;
		},
		onShow: function() {
			
			var that = this;
			that.$api.globalUtil.getUserInfo(that, function(res) {
				that.userInfo = res.data.response;
				if(res.data.response.name) {
					that.realNameFlag = true;
				}else {
					that.realNameFlag = false;
				}
				
				//是否实名认证
				that.showHideRealNameView();
			});
		},
		methods: {

			//是否实名认证
			showHideRealNameView() {
				
				let that = this;
				if(that.priceFinally / 100 > 1000) {
					if(that.realNameFlag) {
						that.realNameViewFlag = false;
					}else {
						that.realNameViewFlag = true;
					}
				}else {
					that.realNameViewFlag = false;
				}
			},
			
			// goto实名认证
			gotoRealName() {
				uni.navigateTo({
					url: '/pagesUser/realName?userInfo={}'
				});
			},
			

			//数量操作
			minusOneHandler() {
				if(this.buyCount == 1) {
					return ;
				}
				this.buyCount = parseInt(this.buyCount) - 1;
				this.priceFinally = this.cgsAmount * this.buyCount;
				
				//是否实名认证
				this.showHideRealNameView();
			},
			addOneHandler() {
				this.buyCount = parseInt(this.buyCount) + 1;
				this.priceFinally = this.cgsAmount * this.buyCount;
				
				//是否实名认证
				this.showHideRealNameView();
			},

			inputOneHandler() {
				if(!this.buyCount || parseInt(this.buyCount) < 1) {
					this.buyCount = 1;
				}else {
					this.buyCount = parseInt(this.buyCount);
				}
				
				this.priceFinally = this.cgsAmount * this.buyCount;
				
				//是否实名认证
				this.showHideRealNameView();
			},
			
			
			//选择发票
			gotoSelectInvoicePage() {
				uni.navigateTo({
					url: "/pagesUser/invoice/select"
				});
			},

			//选择发票回调
			selectInvoiceHandler(invoiceInfo) {
				this.invoiceInfo = invoiceInfo;
			},
			
			
			//礼品卡使用协议
			toRichtext(type) {
				uni.navigateTo({
					url: '/pagesUser/userRichtext?type=' + type
				});
			},

			//提交订单
			submitOrder() {
				if (!this.buyCount || this.buyCount <= 0) {
					this.$api.msg(`最少也要买1个`, 3000);
					this.butCount = 1;
					this.priceFinally = 1 * this.cgsAmount;
					return;
				}
				
				let that = this;
				var payModule = "giftCard";
				var payAmount = that.cgsAmount * that.buyCount;
				var payApiUrl = {
					wxPay: "/PayApi/wxPayGiftCardForApi",
					aliPay: "/PayApi/alipayGiftCardForApi"
				};
				var payData = {
					cgcSpecificationId: that.cgcSpecificationId,
					buyNum: that.buyCount,
					customerInvoiceId: that.invoiceInfo ? that.invoiceInfo.cfId : "",
					cidType: that.invoiceInfo ? that.invoiceInfo.cidType : "",
					cidEmail: that.invoiceInfo ? that.invoiceInfo.ciEmail : ""
				};
				
				payData["aliPayWap"] = "NO";
				payData["aliPayApp"] = "YES";
				
				uni.navigateTo({
					url: "/pagesUser/payment?payModule="+payModule+"&payAmount="+payAmount+"&payApiUrl="+JSON.stringify(payApiUrl)+"&payData="+JSON.stringify(payData)
				});
			}
		}
	};
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0;
		background: rgba(255, 255, 255, 1);

		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;

			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}

		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}


	//当前规格
	.currentSpec {
		margin: 0 auto;
		width: 100%;
	}
	.goods-item .goods-logo {
		display: flex;
		align-items: center;
		flex: 0 0 170rpx;
		width: 168rpx;
		height: 107rpx;
		border-radius: 10rpx;
	}
	.goods-item .goods-logo image {
		width: 168rpx;
		height: 107rpx;
	}
	.goods-item .goods-main {
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding-left: 30rpx;
		width: calc(100% - 170rpx);
		height: 170rpx;

		.goods-title {
			width: 100%;
			font-size: 28rpx;
			font-family: PingFang SC;
			color: rgba(51, 51, 51, 1);
		}

		.goods-price {
			margin-top: 30rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(224, 19, 39, 1);
		}
	}
	.good-list {
		position: relative;
		display: flex;
		padding: 0 30rpx;
		align-items: center;
		width: 100%;
		height: 200rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 0 0 16rpx 16rpx;
		box-shadow: 0px 4rpx 8rpx 0px rgba(142, 142, 142, 0.08);
	}
	.good-list .good-item {
		border-radius: 14rpx;
		background: rgba(255, 255, 255, 1);
		padding-left: 20rpx;
		box-sizing: border-box;
	}


	// 实名认证
	.realName-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: -10rpx;
		padding: 0 30rpx;
		width: 100%;
		height: 160rpx;
		border-radius:0px 0px 16rpx 16rpx;
		background-color: #FFFFFF;
		
		.lefter {
			display: flex;
			flex-direction: column;
			.idCard-Container {
				display: flex;
				align-items: center;
				
				.idCard-icon {
					width: 22rpx;
					height: 24rpx;
				}
				
				.idCard-text {
					margin-left: 17rpx;
					font-size:26rpx;
					font-family:PingFang SC;
					// font-weight:500;
					color:rgba(224,19,39,1);
				}
			}
			
			.idCardTips-Container {
				margin-top: 10rpx;
				font-size:24rpx;
				font-family:PingFang SC;
				// font-weight:500;
				color:rgba(102,102,102,1);
			}
		}
		
		.righter {
			.select-icon {
				width: 15rpx;
				height: 27rpx;
			}
		}
	}
	

	/* 单行容器 */
	.oneItem-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 21rpx;
		padding: 0 30rpx;
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		border-radius: 14rpx;
		
		.item-label {
			width: 130rpx;
			height: 104rpx;
			line-height: 104rpx;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			// font-weight: 400;
			color: #666666;
		}
		
		.item-operate {
			height: 104rpx;
			line-height: 104rpx;
			font-size: 28rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
		}
	}


	//购买数量
	.goods-number view {
		font-size: 31rpx;
		font-family: ArialMT;
		font-weight: 400;
		color: rgba(252, 134, 0, 1);
		line-height: 32rpx;
		margin-right: auto;
	}
	.goods-number text {
		width: 125rpx;
		height: 42rpx;
		background: rgba(188, 188, 188, 1);
		border-radius: 21rpx;
		font-size: 22rpx;
		font-family: MicrosoftYaHei;
		font-weight: 400;
		color: rgba(254, 254, 254, 1);
		line-height: 42rpx;
		text-align: center;
	}
	.goods-number image {
		width: 48rpx;
		height: 48rpx;
	}
	.goods-number input {
		border: none;
		width: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang-SC-Medium;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 50rpx;
		height: 50rpx;
	}
	.count-Content {
		display: flex;
		width: 170rpx;
		height: 50rpx;
		
		.minusOne {
			width:50rpx;
			height:50rpx;
			line-height: 50rpx;
			text-align: center;
			background:rgba(255,255,255,1);
			border:1rpx solid rgba(219,219,219,1);
			border-radius:5rpx 0px 0px 5rpx;
		}
		.inputCount {
			width: 80rpx;
			text-align: center;
			background:rgba(251,251,251,1);
			border:1rpx solid rgba(219,219,219,1);
			border-left: 0;
			border-right: 0;
		}
		.addOne {
			width:50rpx;
			height:50rpx;
			line-height: 50rpx;
			text-align: center;
			background:rgba(255,255,255,1);
			border:1rpx solid rgba(219,219,219,1);
			border-radius:0 5rpx 5rpx 0;
		}
		
		.minusOne, .addOne {
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	
	
	// 协议
	.agreement-Container {
		display: flex;
		justify-content: center;
		margin-top: 46rpx;
		width: 100%;
		height: 22rpx;
		line-height: 22rpx;
		text-align: center;
		font-size:20rpx;
		color:rgba(153,153,153,1);
		
		.agreeIcon {
			margin-right: 12rpx;
			width: 22rpx;
			height: 22rpx;
		}
		
		.description {
			color: #999999;
		}
		.agreeH5Link {
			color: #F13D3D;
		}
	}
	

	/* 底部条 */
	.submit-bar {
		display: flex;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 750rpx;
		height: 98rpx;
		background: rgba(255, 255, 255, 1);
		z-index: 9999;
		justify-content: flex-end;
		padding: 0 28rpx;
		box-sizing: border-box;
		
		.submit-prices view {
			font-size: 26rpx;
			font-family: MicrosoftYaHei;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}
		.submit-prices text {
			font-size: 26rpx;
			font-family: MicrosoftYaHei;
			font-weight: 400;
			color: #E01327;
		}
		
		.submit-btn {
			margin-left: auto;
			width: 194rpx;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size:30rpx;
			font-family:PingFang SC;
			color:rgba(255,255,255,1);
			background: linear-gradient(90deg, rgba(224, 19, 38, 1) 0%, rgba(207, 0, 182, 1) 100%);
			border-radius: 35px;
		}
	}


	/* 发票信息 */
	.invoice-Container {
		align-items: center;
		
		.item-operate {
			margin-left: auto;
		}
		
		.invoiceTitle {
			max-width: 450rpx;
		}
	}
	
	
	//选择发票
	.selectInvoice-Container {
		display: flex;
		align-items: center;
		margin-left: auto;
		
		.unSelectText {
			margin-right: 16rpx;
			font-size: 26rpx;
			color: #333333;
		}
		.selectedText {
			color: #E01327;
		}
		
		.selectInvoice {
			width: 10rpx;
			height: 16rpx;
		}
	}
</style>



